import { ref, readonly, watch, computed } from 'vue';
import {
  getInfoListApi,
  getInfoItemLikeApi,
  deleteInfoItemApi,
  addInfoItemApi,
  getBannerApi,
  getTop4Api,
  updateInfoApi,
  queryInfoByIdApi,
} from '../apis/infoApi.js';
import { debounce } from 'lodash';
import useOrderByData from './useOrderByData.js';

const KEY = 'electron_key';

export default function useInfoDataFun() {
  const imgBaseUrl = import.meta.env.VITE_BASE_FILE_SRC;
  const showDialogRef = ref(false);

  const listRef = ref([]);
  const searchListRef = ref([]);
  const bannerListRef = ref([]);
  const top4ListRef = ref([]);
  const loadingRef = ref(false);
  const searchInfoLoadingRef = ref(false);

  const searchInfoLoadingRendonly = readonly(searchInfoLoadingRef);
  const infoLoadingRendonly = readonly(loadingRef);
  const isDialogReadonly = readonly(showDialogRef);
  const listRendonly = readonly(listRef);
  const searchListReadonly = readonly(searchListRef);
  const bannerListRendonly = readonly(bannerListRef);
  const top4ListRendonly = readonly(top4ListRef);

  const setShowDialog = (show) => {
    showDialogRef.value = show;
  };

  // 新增 info
  const addItem = async (item) => {
    await addInfoItemApi(item);
    getList();
  };

  // 编辑
  const updateInfoItem = async (item) => {
    await updateInfoApi(item);
  };

  // 根据id获取详情
  const getInfoById = async (id) => {
    const { code, data } = await queryInfoByIdApi(id);
    if (code === 200) {
      return data;
    }
  };

  // 获取 info 所有数据
  const getList = async () => {
    loadingRef.value = true;
    try {
      const { code, rows } = await getInfoListApi();
      if (code === 200) {
        const orderByList = await useOrderByData(rows);
        listRef.value = orderByList;
      }
    } catch (error) {
    } finally {
      loadingRef.value = false;
    }
  };

  // 删除单条
  const delListItem = async (id) => {
    await deleteInfoItemApi(id);
    getList();
  };

  // 搜索
  const searchInfoList = async (value) => {
    searchInfoLoadingRef.value = true;
    await searchFun(value)
  };
  const searchFun = debounce(async (value) => {
    try {
      
      if (value) {
        const { code, rows } = await getInfoItemLikeApi({ title: value });
        if (code === 200) {
          searchListRef.value = rows;
        }
      } else {
        const { code, rows } = await getInfoListApi();
        if (code === 200) {
          searchListRef.value = rows;
        }
      }
    } finally {
      searchInfoLoadingRef.value = false;
    }
  },300)

  // 获取banner
  const getBannerList = async () => {
    const { code, rows } = await getBannerApi();
    if (code === 200) {
      bannerListRef.value = rows;
      console.log(rows);
    }
  };

  // 获取前top4
  const getTop4List = async () => {
    const { code, rows } = await getTop4Api();
    if (code === 200) {
      const orderByTop4 = await useOrderByData(rows);
      top4ListRef.value = orderByTop4.map((item) => ({
        ...item,
        screenshot: imgBaseUrl + item.screenshot,
      }));
    }
  };

  return {
    infoLoadingRendonly,
    listRendonly,
    searchListReadonly,
    isDialogReadonly,
    bannerListRendonly,
    top4ListRendonly,
    searchInfoLoadingRendonly,
    setShowDialog,
    getList,
    addItem,
    delListItem,
    searchInfoList,
    getBannerList,
    getTop4List,
    updateInfoItem,
    getInfoById,
  };
}
